<div th:fragment="control_chart_pie">
<script type="text/javascript">
	var get_pie_option = function()
	{
		return {
			tooltip : {
				trigger : 'item',
				formatter : "{a} <br/>{b}: {c} ({d}%)"
			},
			legend : {
				orient : 'vertical',
				x : 'left',
				data : [ '1月', '2月', '3月', '4月', '5月' ]
			},
			"color" : [ "#02af6d", "#58abf9", "#d79de3", "#f9be58", "#b5ea7c", "#fa9c7d", "#01bc6f", "#60C0DD", "#D7504B", "#C6E579", "#F4E001", "#26C0C0" ],
			series : [],
			sql : ""
		};
	}

	/** 环形图元数据 */
	function metadata_pie(params)
	{
		var series = {
			type : 'pie',
			name : "系列一",
			column : "SUMVALUE",
			radius : [ '60%', '80%' ],
			avoidLabelOverlap : true,
			label : {
				normal : {
					show : true,
					position : 'outer'
				}
			},
			labelLine : {
				normal : {
					show : true
				}
			},
			data : [ {
				value : 1,
				name : '1月'
			}, {
				value : 2,
				name : '2月'
			}, {
				value : 3,
				name : '3月'
			}, {
				value : 4,
				name : '4月'
			}, {
				value : 5,
				name : '5月'
			} ]
		};
		var opt = get_pie_option();// 每个视图创建新的option，防止相互污染
		opt.series.push(series);
		params = $.extend({}, {
			DATASET : {
				series : series
			},
			OPTION : opt
		}, params);
		return $.extend(new metadata_chart_base(params), this);
	}

	/** 环形图 元数据视图 面板视图 */
	function metadata_view_pie(control)
	{
	    var restoOpt = new resToOption();
		this.DATASET = function()
		{
			var view = $($("#DATASET").html());
			var _this = this;
			var option = this.control.getMetadata("OPTION");
			var seriesData = $.extend({}, this.control.getMetadata("DATASET").series);
			var series = option.series, sql = option.sql;
			var setDataSetDetail = function(s)
			{
				var name = s.name, column = s.column, radius = s.radius, label = s.label.normal.position;
				var detail_view = $($("#DATASET_DETAIL_PIE").html());
				detail_view.find("input[name=title]").val(name);
				detail_view.find("input[name=column]").val(column);
				detail_view.find("input[name=radius1]").val(parseInt(radius[0]));
				detail_view.find("input[name=radius2]").val(parseInt(radius[1]));
				detail_view.find("select").val(label);
				return detail_view;
			}
			var getDataSetDeatil = function()
			{
				option.sql = $(view).find("textarea").val();
				$(view).find(".dataset_detail").each(function(i, item)
				{
					var n = $(item).find("input[name=title]").val();
					var c = $(item).find("input[name=column]").val();
					var r1 = $(item).find("input[name=radius1]").val();
					var r2 = $(item).find("input[name=radius2]").val();
					var l = $(item).find("select").val();
					$.extend(option.series[i], {
						name : n,
						column : c,
						radius : [ r1 + "%", r2 + "%" ],
						label : {
							normal : {
								position : l
							}
						}
					});
				});
			}

			$(view).find("textarea").val(sql);
			for ( var i in series)
			{
				$(view).append(setDataSetDetail(series[i]));
			}
			//增加按钮
			view.find(".add-btn").click(function()
			{
				var p = $.extend({}, seriesData);
				option.series.push(p);
				$(view).append(setDataSetDetail(p));
				_this.linkViewOption(option);
			});
			//系列名、字段名
			view.on("keyup", "input,textarea", function()
			{
				getDataSetDeatil();
				_this.linkViewOption(option);
			});
			view.on("focus", "input,textarea", function()
			{
				$(this).popover("show");
			});
			view.on("blur", "input,textarea", function()
			{
				$(this).popover("hide");
			});
			view.on("change", "select", function()
			{
				getDataSetDeatil();
				_this.linkViewOption(option);
			});
			view.on("focus", "select", function()
			{
				$(this).popover("show");
			});
			view.on("blur", "select", function()
			{
				$(this).popover("hide");
			});
			//SQL执行按钮
			view.on("click", ".sql-btn", function()
			{
				var sql = $(view).find("textarea").val();
				queryChartBySql(sql, "pie", function(result)
				{
					try
					{
                        result.type = "pie";
                        option = restoOpt.getOption(result, option);
                        _this.linkViewOption(option);
					} catch (e)
					{
						console.error(e);
					}
				});
			});
			//删除按钮
			view.on("click", ".delete-btn", function()
			{
				var index = $(this).index(".delete-btn");
				option.series.splice(index, 1);
				$(this).parents(".dataset_detail").remove();
				_this.linkViewOption(option);
			});
			$(this.settingPanel).append(view);
		}
		return $.extend(new metadata_view_chart_base(control), this);
	}
	/** 环形图 表单视图 */
	function metadata_form_view_pie(control)
	{
		this.control = control;
		this.echart = echarts.init($(control).find(".echarts-div")[0]);
		return $.extend(new metadata_form_view_chart_base(control), this);
	}
</script>

<!-- 控制面板 环形图 半径 -->
<script type="text/html" id="DATASET_DETAIL_PIE">
<div class="dataset_detail">
	<table class="setting-control-table">
		<tr>
			<td class="setting-control-label">名称</td>
			<td colspan="1"><input name="title" class="form-control" data-content="图表名称" data-trigger="manual"  data-placement="bottom"></td>
			<td class="setting-control-label">字段</td>
			<td colspan="1"><input name="column" class="form-control" data-content="配置SQL的字段名称" data-trigger="manual"  data-placement="bottom"></td>
			<td colspan="2">
				<a href="javascript:;" class="btn btn-default btn-sm delete-btn">删除</a>
			</td>
		</tr>
		<tr>
			<td class="setting-control-label80">内半径(%)</td>
			<td><input name="radius1" class="form-control" data-content="图表内半径占百分比" data-trigger="manual" data-placement="bottom"></td>
			<td class="setting-control-label80">外半径(%)</td>
			<td><input name="radius2" class="form-control" data-content="图表外半径占百分比" data-trigger="manual" data-placement="bottom"></td>
			<td class="setting-control-label">标题位置</td>
			<td>
				<select name="label" class="form-control" style="width:80px;" data-content="标题显示位置外部、图形、中心" data-trigger="manual" data-placement="bottom">
					<option value="outer">外部</option>
					<option value="inner">图形</option>
					<option value="center">中心</option>
				</select>
			</td>
		</tr>
	</table>
</div>
</script>
</div>